<template>
  <div>
    <el-page-header @back="goBack"  content="面试记录详情信息"></el-page-header>
    <el-divider content-position="left">
      <b>个人信息</b>
    </el-divider>
    <el-form :model="dataForm" ref="dataForm" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="姓名" prop="name">
                {{dataForm.name}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="电话" prop="phone">
                {{dataForm.phone}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="籍贯" prop="nativePlace">
                {{dataForm.nativePlace}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="民族" prop="minzu">
                {{dataForm.minzu}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="年龄" prop="age">
                {{dataForm.age}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="性别" prop="gender">
                <el-tag type="danger" v-if="dataForm.gender == 0">女</el-tag>
                <el-tag v-else>男</el-tag>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="工龄" prop="workYear">
                <span v-if="dataForm.workYear == 0">无</span>
                <span v-else-if="dataForm.workYear == 1">一年</span>
                <span v-else-if="dataForm.workYear == 2">两年</span>
                <span v-else-if="dataForm.workYear == 3">三年</span>
                <span v-else>三年以上</span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="预约时间" prop="appointmentTime">
                {{dataForm.appointmentTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="简历" prop="userResume">
                  <a :href="dataForm.userResume" target="_blank">下载</a>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="应聘岗位" prop="station">
                {{dataForm.station}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="面试官" prop="interviewer">
                  <span>{{getInterviewName (dataForm.interviewer)}}</span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="创建人" prop="createUser">
                {{dataForm.createUser}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="创建时间" prop="createTime">
                {{dataForm.createTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>
    <el-divider content-position="left">
      <b>面试结果</b>
    </el-divider>
    <el-form :model="dataForm" ref="dataForm" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="是否签到" prop="signIn">
                <el-tag v-if="dataForm.signIn == 0" type="danger">未签到</el-tag>
                <el-tag v-else>已签到</el-tag>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="签到时间" prop="signInTime">
                {{dataForm.signInTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="最低薪资" prop="minPay">
                {{dataForm.minPay}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="面试评分" prop="interviewScore">
                <el-tag v-if="dataForm.interviewScore == 59" type="info">差</el-tag>
                <el-tag v-if="dataForm.interviewScore == 75" >一般</el-tag>
                <el-tag v-if="dataForm.interviewScore == 85" type="success">良好</el-tag>
                <el-tag v-if="dataForm.interviewScore == 95" type="warning">优秀</el-tag>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="面试结果状态" prop="interviewStatus">
                <el-tag v-if="dataForm.interviewStatus == 0" type="danger">未通过</el-tag>
                <el-tag v-else>已通过</el-tag>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="审核时间" prop="interviewTime">
                {{dataForm.interviewTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>
    <el-divider content-position="left">
      <b>录取情况</b>
    </el-divider>
    <el-form :model="dataForm" ref="dataForm" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="录取状态" prop="enrollStatus">
                <el-tag v-if="dataForm.enrollStatus == 0" type="danger">未录取</el-tag>
                <el-tag v-else>已录取</el-tag>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="录取时间" prop="enrollTime">
                {{dataForm.enrollTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="入职状态" prop="entryStatus">
                <el-tag v-if="dataForm.entryStatus == 0" type="danger">未入职</el-tag>
                <el-tag v-else>已入职</el-tag>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="入职时间" prop="entryTime">
                {{dataForm.entryTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="入职部门" prop="entryOrganization">
                {{dataForm.entryOrganization}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="未入职原因" prop="notEmployReason">
                {{dataForm.notEmployReason}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>
    <el-divider content-position="left">
      <b>历史面试记录</b>
    </el-divider>
    <el-card >
      <h2 v-if="isFormEmpty">暂无更多历史面试记录</h2>
      <div v-else>
        <p>{{historyForm.createUser}} 提交于 {{historyForm.createTime}}</p>
        <el-form :model="historyForm"  class="wds-form-top" label-width="150px">
          <el-row class="wds-frame">
            <el-row class="wds-el-row" type="flex">
              <el-col :span="12">
                <div class="wds-frame-l">
                  <div class="wds-bj"></div>
                  <el-form-item class="wds-frame-form-item" label="姓名">
                    {{historyForm.name}}
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="wds-frame-l">
                  <div class="wds-bj"></div>
                  <el-form-item class="wds-frame-form-item" label="电话" >
                    {{historyForm.phone}}
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row class="wds-el-row" type="flex">
              <el-col :span="12">
                <div class="wds-frame-l">
                  <div class="wds-bj"></div>
                  <el-form-item class="wds-frame-form-item" label="应聘岗位" >
                    {{historyForm.station}}
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="wds-frame-l">
                  <div class="wds-bj"></div>
                  <el-form-item class="wds-frame-form-item" label="预约时间" >
                    {{historyForm.appointmentTime}}
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          id: 0,
          parentId: '',
          name: '',
          phone: '',
          nativePlace: '',
          minzu: '',
          age: '',
          gender: '',
          workYear: '',
          appointmentTime: '',
          userResume: '',
          station: '',
          interviewer: '',
          createUser: '',
          createTime: '',
          signIn: '',
          signInTime: '',
          minPay: '',
          interviewScore: '',
          interviewStatus: '',
          interviewTime: '',
          enrollStatus: '',
          enrollTime: '',
          entryStatus: '',
          entryTime: '',
          entryOrganization: '',
          notEmployReason: ''
        },
        historyForm:{
          name:'',
          phone:'',
          station:'',
          appointmentTime:'',
          createUser:'',
          createTime:''
        },
        interviewerList:[]
      }
    },
    computed: {
      isFormEmpty() {
        return !this.historyForm.name && !this.historyForm.phone && !this.historyForm.station && !this.historyForm.createUser && !this.historyForm.createTime;
      }
    },
    created() {
      this.getInterviewer()
    },
    methods: {
      goBack () {
        this.$emit('goBack');
      },
      init(row){
        console.log(row,"xx")
        this.dataForm = row;
        this.getHistory()
        console.log(this.historyForm)
      },
      // 获取历史面试记录
      getHistory(){
        this.$http({
          url: this.$http.adornUrl(`/interview/interviewRecords/getHistory`),
          method: 'get',
          params: this.$http.adornParams({
            'name': this.dataForm.name,
            'phone': this.dataForm.phone,
            'createTime': this.dataForm.createTime
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // 数据回显
            this.historyForm.name = data.history.name
            this.historyForm.phone = data.history.phone
            this.historyForm.station = data.history.station
            this.historyForm.appointmentTime = data.history.appointmentTime
            this.historyForm.createUser = data.history.createUser
            this.historyForm.createTime = data.history.createTime
          }
        })
      },
      // 获取面试官姓名集合
      getInterviewer(){
        this.$http({
          url: this.$http.adornUrl(`/sys/user/getInterviewer`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.interviewerList = data.interviewers.map(item => ({
              value: item.userId,
              label: item.username
            }))
            console.log(this.interviewerList)
          }
        })
      },
      getInterviewName(interviewer){
        const interview = this.interviewerList.find(item => item.value === interviewer)
        return interview ? interview.label : '张三'
      }




    }
  }
</script>

<style>
.wds-form-top {
  margin-top: 8px;
}
.wds-frame {
  margin-left: 15px;
  margin-right: 15px;
  border-top: 1px solid rgba(184, 194, 215, 0.4);
  border-right: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-l {
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid rgba(184, 194, 215, 0.4);
  border-bottom: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-form-item .el-form-item__label {
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  width: 130px !important;
  color: #054999;
}
.wds-bj{
  width: 140px;
  //background: #fafafa;
  //background-color: transparent;
  border-right: 1px solid rgba(184, 194, 215, 0.4);
  height: 100%;
  position: absolute;
  margin-top: 0px;
}
.wds-frame-form-item{
  max-height: 25px;
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  color: #054999;
}
.layui-layer-min {
  display: none !important;
}
/deep/ .el-divider .el-divider__text {
  font-size: 18px !important;
  font-weight: 800;
}

.el-form-item__content {

}

</style>
